iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
0
自我挑戰組

學習 canvas 日記系列 第 6

第 6 天 畫布置中

  • 分享至 

  • xImage
  •  

在第2天時有練習到畫布拉大到全螢幕

var canvas = document.getElementById("cvs");
var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.fillStyle = '#f80';
ctx.fillRect(0, 0, canvas.width, canvas.height);

再加上 CSS 的

body{
  margin: 0;
}

就可以做到

但現在需要一個比視窗小的畫布尺寸又要置中時
就要移動畫布的位置並置中
這裡只需要 CSS 設定
作法有 2 個

都是要先把 行內元素 換成 區塊元素
因為 canvas 預設為 行內元素
若是還是用 行內元素 CSS 設定的話
畫布會沒反應

最簡單的置中

#cvs {
	display: block;
    margin: 0 auto;
}

但只能左右置中、靠上
如果只要置中
寫到這裡就夠了

若是左右、上下都要置中的話
就要用到 position 排版

#cvs {
    position: absolute;
    display: block;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

而且置中要微調也是可以在 "上下左右" 的值去做設定


上一篇
第 5 天 線性漸層、圓形漸層
下一篇
第 7 天 線的樣式
系列文
學習 canvas 日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言